In diesem Kapitel schauen wir uns die ersten Schritte in CSS an, um Webseiten optisch zu gestalten. Hier sind SelfHTML und edv-lehrgang.de gute Quellen.

Was ist CSS? Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML eine der Kernsprachen des World Wide Webs. Sie ist ein lebendiger Standard und wird vom W3C beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt werden. CSS wurde entworfen, um Darstellungsvorgaben von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben. Mit CSS werden dann die Definitionen zur Darstellung der Inhalte gesondert festgelegt, insbesondere Layout, Farben und Typografie.

CSS ermöglicht eine vielseitige Gestaltung der physischen Darstellung einer Webseite. Dazu gehören Schriftart, Schriftgröße, Schriftstil; Zeichen- und Zeilenabstand, Einrückung; Text- und Hintergrundfarbe; Rahmen; die freie Platzierung und Überlappung von Objekten sowie unterschiedliche Formate für Druck, Bildschirm und Mobilgerät.

CSS ermöglicht eine strikte Trennung zwischen dem Inhalt und der Darstellung. Der Inhalt wird logisch in HTML formatiert. Die Darstellung erfolgt separat und parallel in CSS. So wird eine Arbeitsteilung zwischen Autor und Designer möglich. Eine Wiederverwendung von Einstellungen ist durch die Kaskadierung möglich. Sie können eine exakte Bestimmung des Erscheinungsbilds vornehmen. Eine Optimierung für bestimmte Ausgabemedien ist möglich, was wichtig für barrierefreies Webdesign ist.

Hier folgen zwei verschiedene CSS-Formatierungsbeispiele von der Webseite css-zen-garden. Alle Einstellungen können Sie sich frei herunterladen, ansehen und damit etwas experimentieren.

Hier ist das Beispiel Nummer 201. Es erzeugt einen völlig anderen Eindruck als das erste Beispiel.

Wie bereiten Sie nun eine CSS-Formatierung vor? Die Basis ist eine HTML-Seite als logische Sequenz von Blöcken. Jeder Block wird mit einem passenden Tag gekennzeichnet wie h1 oder mit div. Elemente, die speziell formatiert werden sollen, aber keinen Block erzeugen sollen, werden durch das span-Element gekennzeichnet. Die Reihenfolge entspricht der logischen Reihenfolge. Die Blöcke werden nun mit CSS formatiert, positioniert und ausgerichtet.

Schauen wir uns zunächst an, wie Farben in CSS definiert werden.

Die Farben werden im RGB-Farbraum definiert. Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau definiert. Jede Farbe hat also einen Rotwert, einen Grünwert und einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der Wert 0 bedeutet: kein Anteil an der betreffenden Grundfarbe. Der Wert 255 bedeutet: maximaler Anteil an der betreffenden Grundfarbe. Die folgende Abbildung zeigt, wie Farbtöne beim RGB-Modell durch addierendes Mischen zustande kommen.

Die additive Farbmischung des RGB-Farbraums lässt sich mit drei Taschenlampen vergleichen, die jeweils rot, grün und blau abstrahlen. Die folgenden Farben ergeben sich, wenn sich die Taschenlampen überlappen. Daneben sehen Sie die Rot-, Grün- und Blauanteile jeweils in dezimaler Schreibweise.

In diesem Bild ist der RGB-Farbraum als dreidimensionaler Würfel dargestellt. Zum Finden einzelner Farben gibt es auch viele Webseiten-Rechner, bei denen man die RGB-Anteile ermitteln kann.

Die hexadezimale Schreibweise ist die am weitesten verbreitete Methode, um einen Farbwert anzugeben. Nach einem Gatterzeichen (Hash) werden die Farbanteile der Farben Rot, Grün und Blau in einem Bereich von 00 bis FF (255) notiert. Allgemein also #RRGGBB. CSS erlaubt auch eine Kurzschreibweise, allgemein mit #RGB. Die Kurzschreibweise ist nur dann möglich, wenn die erste und die zweite Ziffer aller Farbwerte identisch sind. Unten sehen Sie ein paar erste Beispiele in kurzer und langer HEX-Schreibweise. Bei Schwarz sind alle Taschenlampen ausgeschaltet, es ist dunkel.

In CSS3 sind mehrere Schreibweisen für Farben erlaubt. Die erste wurde eben vorgestellt, die hexadezimalen RGB-Farbanteile. Dezimal können die Farbanteile auch angegeben werden unter Verwendung der rgb-Funktion. Die rgb-Funktion kann auch mit prozentualen Anteilen verwendet werden. Statt rgb können Sie auch den HSL-Farbraum verwenden, was aber seltener ist. Hier geben Sie Werte für hue, saturation und lightness an, also für den Farbton, die Sättigung und die Helligkeit. Möglich ist auch immer die Angabe eines vierten Wertes. Dieser Alpha-Kanal beschreibt den Grad der Transparenz. Letztlich ist es noch möglich, vordefinierte Farben in Textform zu verwenden, wie black, white oder olive.

Wie kann man CSS in HTML einbinden?

Mit dem Universalattribut "style" können Sie Eigenschaften einem HTML-Element direkt zuweisen. Dabei sind nur Deklarationen, also Eigenschaft-Wert-Zuweisungen möglich. Durch das direkte Festlegen von Formaten, umgangssprachlich auch "Inline-Style" genannt, gehen aber viele Vorteile von CSS verloren. Der Wartungsaufwand steigt, während sich die Flexibilität verringert. Inline-Styles sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden. Die Inline-Styles widersprechen auch der strikten Trennung von Content in HTML5 und Darstellung in CSS3.

In diesem Inline-Beispiel wird die Überschrift "Rote Überschrift" in der Schriftfarbe rot dargestellt. Prinzipiell ist es bei jedem HTML-Element möglich, direkt mit dem Attribut "style" CSS-Formatierungen vorzunehmen. Dafür wird in der Attributliste des Elements das Attribut "style" hinzugefügt. In Anführungszeichen erfolgen dann die CSS-Angaben. Diese müssen jeweils mit einem Semikolon voneinander getrennt werden. Leerzeichen sind erlaubt und dienen der Lesbarkeit.

Das HTML-Element "style" erlaubt es, Formate zentral als Kindelement im head des HTML-Dokuments festzulegen. Im folgenden Beispiel wird das HTML-Element h1 mit CSS adressiert und die Schriftfarbe in rot geändert.

Im Normalfall besteht eine Webpräsenz aus oft hunderten von Seiten, die alle gleich formatiert werden sollen. Hier hat es sich durchgesetzt, das CSS in einem eigenen externen Stylesheet mit der Endung .css abzuspeichern und mit dem HTML-Element "link" direkt im head einzubinden. Folgende Attribute sind erforderlich und ausreichend, um ein Stylesheet einzubinden: "rel" definiert den logischen Beziehungstyp des Elements. "stylesheet" bedeutet, dass ein Stylesheet eingebunden werden soll. "href" referenziert zuletzt die einzubindende Stylesheet-Datei.

Das link-Element kann aber noch weitere Attribute besitzen, die auf Stylesheets eine Wirkung haben. "type" enthält den Medientyp der einzubindenden Datei, für CSS also "text/css". Da dies in HTML der Standardtyp ist, kann es auch weggelassen werden. "media" kann festlegen, dass ein Stylesheet nur dann verarbeitet werden soll, wenn das Dokument von einem bestimmten Ausgabemedium ausgegeben wird. Als Attributwert ist eine Medienabfrage erlaubt, beispielsweise "screen" für Bildschirme oder "print" für Drucker. Ist das Attribut nicht definiert, gilt der Standardwert "all". CSS erlaubt es, mit Media Queries für Ausgabemedien mit bestimmten Eigenschaften, etwa Tablets, Smartphones, aber auch Drucker, abweichende Darstellungen festzulegen.

Abschließend sehen Sie das Einbinden einer externen CSS-Datei im head einer HTML-Datei. In diesem Beispiel wird eine Datei mit dem Namen design.css in das HTML-Dokument inkludiert. Dabei werden alle in dieser Datei enthaltenen Styles auf das HTML-Dokument angewendet.